<template>
    <div class = "finish">
         <van-nav-bar
            title="帮助与反馈"
            left-arrow
            @click-left="onClickLeft"
        />
        <section>
            <nav>
                <p class = "proof">图片证据</p>
                <p class = "proof_font">{{ imgNum }}张/9</p>
            </nav>
            <aside>
                <div class = "img">
                    <img src="" alt="">
                </div>
                 <div class = "img">
                    <img src="" alt="">
                </div>
                 <div class = "img">
                    <img src="" alt="">
                </div>
                 <div class = "img">
                    <img src="" alt="">
                </div>
                 <div class = "img">
                    <img src="" alt="">
                </div>
                <div class = "img image" @click="getImg">
                    <img src="@/assets/images/add_img.png" alt="">
                </div>
            </aside>
            <textarea name="" id="" cols="30" rows="10" class = "text_area" placeholder="投诉内容" v-model="fontNum"></textarea>
            <p class = "end">{{ fontNum.length }}/200</p>
        </section>
    </div>
</template>

<script>
export default {
    name:"finish",
    data(){
        return{
            // 用来记录图片的数量
            imgNum:0,
            //用来记录字符串的数量
            fontNum:"",
        }
    },
    methods:{
        getImg(){
            plus.gallery.pick(function(path){
                var name = path.substring(path.lastIndexOf("/")+1); 
                compressPhoto(path,name);//图片压缩
            }, function(e){}, {filter:'image'});
        },
        onClickLeft(){
            this.$router.go(-1)
        }
    }
}
</script>

<style lang="scss" scoped>
    .finish{
        .van-hairline--bottom{
            background:blue;
            .van-icon-arrow-left{
                font-size:16px;
                font-weight:600;
                color:#fff;
            }
            .van-ellipsis{
                color:#fff;
            }
        }
        section{
            padding:15px;
            background:#fff;
            nav{
                display: flex;
                justify-content: space-between;
                p{
                    margin:0px;
                }
            }
            aside{
                margin-top:20px;
                overflow: hidden;
                .img{
                    height:70px;
                    margin-top:15px;
                    float:left;
                    width:70px;
                    margin-left:15px;
                    border:1px solid #eeeeee;                    
                    &.image{
                        border:0px;
                    }
                    img{
                        height:100%;
                        width:100%;
                    }
                }
            }
            .text_area{
                width:100%;
                margin-top:15px;
                height:200px;
                border:0px;
                padding:10px;
                border:1px solid #eee;
                // background:red;
            }
            .end{
                margin:0px;
                text-align: right;
            }
        }
    }
</style>

